<template>
	<div>
		<ul class="details" v-if="datas.length">
			<li v-popover:popover1>
				<div class="right_content_intro_icon"> <i class="icon iconfont">&#xe7f1;</i>
				</div>
				<p>
					<span>{{datas[0]["value"]}}</span>
					<br>
					<span class="right_content_intro">{{datas[0]["title"]}}</span>
					<br>
					<span class="right_content_intro">{{datas[7]["title"]}}：{{datas[7]["value"]}}</span>
					<br>
					<span class="right_content_intro">{{datas[2]["title"]}}：{{datas[2]["value"]}}</span>
				</p> <i class="visible"></i>
				<el-popover
				  ref="popover1"
				  placement="bottom"
				  width="230"
				  trigger="hover"
				  >
				  <h1 style="font-size:14px;font-weight: bold;line-height:30px;">{{datas[0]["title"]}}/{{datas[7]["title"]}}/{{datas[2]["title"]}}</h1>
				  <p>
				  	<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{datas[0]["title"]}}：</span>
				  	<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">
				  		首次启动游戏的设备数（按历史取所有设备的最早启动时间）；
				  	</span>
				  </p>
				  <p>
				  	<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{datas[7]["title"]}}：</span>
				  	<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">
				  		首次登录游戏的设备数（按历史取所有设备的最早登录时间）；
				  	</span>
				  </p>
				  <p>
				  	<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{datas[2]["title"]}}：</span>
				  	<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">
				  		首次登录游戏的设备数（按历史取所有设备的最早登录时间）/首次启动游戏的设备数（按历史取所有设备的最早启动时间）；
				  	</span>
				  </p>
				</el-popover>
			</li>
			<li v-popover:popover2>
				<div class="right_content_intro_icon" style="background: #34495E;margin-right:20px;">
					<i class="icon iconfont">&#xe7de;</i>
				</div>
				<p>
					<span>{{datas[3]["value"]}}</span>
					<br>
					<span class="right_content_intro">{{datas[3]["title"]}}</span>
					<br>
					<span class="right_content_intro">{{datas[1]["title"]}}：<br><span style="font-size:20px;">{{datas[1]["value"]}}</span></span>
				</p>
				<i class="visible"></i>
				<el-popover
				  ref="popover2"
				  placement="bottom"
				  width="200"
				  trigger="hover"
				  >
				  <h1 style="font-size:14px;font-weight: bold;line-height:30px;">{{datas[3]["title"]}}/{{datas[1]["title"]}}</h1>
				  <p>
				  	<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{datas[3]["title"]}}：</span>
				  	<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">
				  		首次登录游戏的账号数;
				  	</span>
				  </p>
				</el-popover>
			</li>
			<li v-popover:popover3>
				<div class="right_content_intro_icon" style="background: #47a947;margin-right:20px;">
					<i class="icon iconfont">&#xe6f1;</i>
				</div>
				<p>
					<span>{{datas[4]["value"]}}</span>
					<br>
					<span class="right_content_intro">{{datas[4]["title"]}}</span>
				</p>
				<i class="visible"></i>
				<el-popover
				  ref="popover3"
				  placement="bottom"
				  width="200"
				  trigger="hover"
				  >
				  <h1 style="font-size:14px;font-weight: bold;line-height:30px;">{{datas[4]["title"]}}</h1>
				  <p>
				  	<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{datas[4]["title"]}}：</span>
				  	<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">时间粒度内登录游戏的去重账号数;
				  	</span>
				  </p>
				</el-popover>
			</li>
			<li v-popover:popover4>
				<div class="right_content_intro_icon" style="background: #f9af3f;margin-right:20px;">
					<i class="icon iconfont">&#xe7ce;</i>
				</div>
				<p>
					<span>{{datas[5]["value"]}}</span>
					<br>
					<span  class="right_content_intro">{{datas[5]["title"]}}</span>
					<br>
					<span class="right_content_intro">{{datas[12]["title"]}}：<br><span style="font-size:20px;">{{datas[12]["value"]}}</span></span>
				</p>
				<i class="visible"></i>
				<el-popover
				  ref="popover4"
				  placement="bottom"
				  width="200"
				  trigger="hover"
				  >
				  <h1 style="font-size:14px;font-weight: bold;line-height:30px;">{{datas[5]["title"]}}</h1>
				  <p>
				  	<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{datas[5]["title"]}}：</span>
				  	<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">时间粒度内的付费总额;
				  	</span>
				  </p>
				</el-popover>
			</li>
			<li v-popover:popover5>
				<p>
					<span>
						<span class="right_content_intro">{{datas[6]["title"]}}：</span>
						<span>{{datas[6]["value"]}}</span>
					</span>
					<br>
					<span>
						<span class="right_content_intro">{{datas[8]["title"]}}：</span>
						<span>{{datas[8]["value"]}}</span>
					</span>
					<br>
					<span>
						<span class="right_content_intro">{{datas[13]["title"]}}：</span>
						<span>{{datas[13]["value"]}}</span>
					</span>
				</p>
				<i class="visible"></i>
				<el-popover
				  ref="popover5"
				  placement="bottom"
				  width="270"
				  trigger="hover"
				  >
				  <h1 style="font-size:14px;font-weight: bold;line-height:30px;">{{datas[6]["title"]}}/{{datas[8]["title"]}}/{{datas[13]["title"]}}</h1>
				  <p>
				  	<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{datas[6]["title"]}}：</span>
				  	<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">付费账号数/活跃账号数;
				  	</span>
				  </p>
				  <p>
				  	<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{datas[8]["title"]}}：</span>
				  	<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">收入/付费用户;
				  	</span>
				  </p>
				</el-popover>
			</li>
			<li>
				<p>
					<span>
						<span class="right_content_intro">{{datas[9]["title"]}}：<br>{{datas[9]["value"]}}</span>
					</span>
					<br>
					<span>
						<span class="right_content_intro">{{datas[10]["title"]}}：<br>{{datas[10]["value"]}}</span>
					</span>
					<br>
					<span>
						<span class="right_content_intro">{{datas[11]["title"]}}：<br>{{datas[11]["value"]}}</span>
					</span>
				</p>
				<i class="visible"></i>
			</li>
		</ul>
		<div class="details" style="height:154px;" v-if="!datas.length"v-loading="!datas.length"
    	element-loading-text="拼命加载中">
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		}, 
		mounted() {
		},
		props: ['datas']
	}
</script>